<template>
  <div>
    <el-divider content-position="left">
      <i
        :class="[showCard ? 'el-icon-caret-top' : 'el-icon-caret-bottom']"
        style="cursor: pointer"
        @click="
          () => {
            this.showCard = !showCard;
          }
        "
      ></i>
      <slot name="header">
        <span style="color: #15428b">少年包青天</span>
      </slot>
      <i class="el-icon-plus" style="cursor: pointer"></i
    ></el-divider>
    <el-card shadow="never" v-show="showCard">
      <el-form ref="form" :model="form" label-width="80px">
        <slot name="form">
          <el-row>
            <el-col :span="12"
              ><el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
        </slot>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "DynamicItemForm",
  data() {
    return {
      showCard: true,
      form: {
        region: "",
      },
      formProperty: [
        {
          label: "活动区域",
          key:'region'
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 0;
}
/deep/.el-divider {
  background-color: #303133;
}
.el-card {
  border-radius: 0px;
  border: 1.5px solid #303133;
  border-top: none;
}
</style>
